/**
 * 校验父组件传入的值类型
 */

import React, { Component } from 'react';
// 导入校验的插件
import PropTypes from 'prop-types';


// 子组件
const Colors = (props) => {

  return (
    <ul>
      {
        props.colors.map((item, index) => <li style={{ background: item, color: '#fff' }} key={index}>{item}</li>)
      }
    </ul>
  )
}
// 校验props
Colors.propTypes = {
  colors: PropTypes.array,
  a: PropTypes.bool.isRequired,
  obj: PropTypes.shape({
    a: PropTypes.string,
    b: PropTypes.bool
  })
}

// 没有传递colors
Colors.defaultProps = {
  colors: ['blue', 'red']
}

// 设置属性的默认值


// 类组件
class Child extends Component {

  // 校验props
  static propTypes = {
    colors: PropTypes.array,
    a: PropTypes.number
  }

  static defaultProps = {
    colors: ['yellow', 'blue', 'red']
  }

  render() {
    const { colors, a } = this.props;
    return (
      <div>
        <p>{a}</p>
        {
          colors.map((item, index) => <li style={{ background: item, color: '#fff' }} key={index}>{item}</li>)

        }
      </div>
    );
  }
}

// Child.propTypes = {
//   colors: PropTypes.array,
//   a: PropTypes.number
// }



//  父组件
class App extends Component {

  state = {
    colors: ['red', 'green', 'orange'],
    arr: 100,
    obj: {
      a: 's',
      b: true
    }
  }
  render() {
    return (
      <div>
        <h1>校验父组件传入的值类型</h1>
        <hr />
        <Colors a={true} obj={this.state.obj} />
        <hr />
        <Child a={10} />
      </div>
    );
  }
}

export default App;